<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button @click="showDOM" ref="btn">点我输出上方的DOM元素</button>
        <SchoolInfo ref="school"/>
    </div>
  
</template>

<script>
    //引入School组件
    import SchoolInfo from   './components/SchoolInfo'
    export default {
        name: 'App',
        components: {
            SchoolInfo
        },
        data() {
            return {
                msg: 'Hello Vue.js!',
            }
        },
        methods: {
            showDOM() {
                //真实的DOM元素
                console.log(this.$refs.title);
                //真实的DOM元素
                console.log(this.$refs.btn);
                //SchoolInfo组件的实例对象(vc)
                console.log(this.$refs.school);
            }
        }
    }
</script>

<style>

</style>